import React, { useState, useImperativeHandle, forwardRef, useEffect } from 'react';
import { Row, Col, Button, Space, Tabs, Input, InputNumber } from 'antd';
import { connect } from 'umi';
import { settle_type, CommissionType } from '@/common/contact'
import TableDataBlock from '@/components/TableDataBlock';
import SelectModel from './components/selectModel'
import PopImgShow from '@/components/PopImgShow'
import './index.less'
const SettingOpeational = (props, ref) => {
  const { onChange, data = [], title } = props
  const [visible, setVisible] = useState(false)

  const formatter = (value) => `${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',');
  const parser = (value) => value.replace(/\$\s?|(?!,?\d{3})/g, '');
  const getColumns = [
    {
      title: '员工名称',
      dataIndex: 'username',
    },
    {
      title: '研发佣金比例',
      dataIndex: 'commissionPercent',
      render: (e, record, index) => {
        return <InputNumber
          formatter={formatter}
          parser={parser}
          precision={2}
          max={100}
          addonAfter={"%"}
          stringMode
          value={e}
          onChange={(e) => {
            onChange(data.map((val, key) => {
              if (key !== index) {
                return val
              }
              else {
                return {
                  ...val,
                  commissionPercent: e
                }
              }
            }))
          }}
        ></InputNumber>
      }
    }

  ];
  // {
  //   label: '研发佣金比例',
  //   name: 'devCommissionPercent',
  //   type: 'number',
  //   addonAfter: "%",
  //   max: 100,
  //   rules: [
  //     {
  //       validator: (rule, value, callback) => {
  //         const regex = /^\d+(\.\d{1,2})?$/; // 正则表达式，匹配最多两位小数
  //         if (value && !regex.test(value)) {
  //           callback('请输入最多两位小数的数字');
  //         } else {
  //           callback(); // 校验通过
  //         }
  //       },
  //     },
  //   ],
  // },
  return (
    <Row gutter={[24, 24]} style={{ marginBottom: 24 }}>
      <Col style={{ textAlign: 'right' }} span={6}>
        研发员工:
      </Col>
      <Col style={{ marginLeft: '4px' }} gutter={[24, 24]}>
        <Button
          onClick={() => {
            setVisible({
              show: true, details: data,
            });
          }}
        >
          +添加研发员工
        </Button>
      </Col>
      <Col offset={6} span={14}>
        {data.length > 0 ? (
          <TableDataBlock columns={getColumns} list={data} pagination={false}></TableDataBlock>
        ) : null}
      </Col>

      <SelectModel onChange={(e = []) => {
        onChange(e)
      }} visible={visible} onClose={() => setVisible(false)} title={title}></SelectModel>
    </Row>
  );

};
export default SettingOpeational